<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="${ctxStatic }/yanchengh/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="${ctxStatic }/yanchengh/css/yanchenghu.css" />
		<link rel="stylesheet" href="${ctxStatic }/yanchengh/css/mui.picker.min.css" />
		<script type="text/javascript" src="${ctxStatic }/yanchengh/js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=kOQ8j9rd2ATw2R54boLMFUalu3gGNGDO&s=1" ></script>
		<script type="text/javascript">
	$(function(){
		$('.change1').on('tap',function(){
			var carPrice = $("#carPrice").val();
			var val = $("#purchasenum").val();
			val=Number(val)-1;
			var suitrtnprice = $("#ticket").val();
			var totalprice = accMul(val,suitrtnprice);
			totalprice =Number(totalprice)+Number(carPrice);
			$('#price').text("￥"+totalprice);
			$('#totalPrice').val(totalprice);
		});
		$('.change2').on('tap',function(){
			var carPrice = $("#carPrice").val();
			var val = $("#purchasenum").val();
			val=Number(val)+1;
			var suitrtnprice = $("#ticket").val();
			var totalprice = accMul(val,suitrtnprice);
			totalprice =Number(totalprice)+Number(carPrice);
			$('#price').text("￥"+totalprice);
			$('#totalPrice').val(totalprice);
		});
		$('#purchasenum').on('blur',function(){
			var carPrice = $("#carPrice").val();
			var val = $("#purchasenum").val();
			val=Number(val);
			var suitrtnprice = $("#ticket").val();
			var totalprice = accMul(val,suitrtnprice);
			totalprice =Number(totalprice)+Number(carPrice);
			$('#price').text("￥"+totalprice);
			$('#totalPrice').val(totalprice);
		});
		//$('#purchasenum').trigger('change');

$("#ychbtns").click(function(){
	
		$.post('${ctxFront}/mobile/activitySubmit',$("form").serialize(),function(data){
			if(data.result){
                mui.alert("提交成功");
            	var browser = {
             			versions: function () {
             			 var u = navigator.userAgent, app = navigator.appVersion;
             			 return {   //移动终端浏览器版本信息
            				   trident: u.indexOf('Trident') > -1, //IE内核
            				   presto: u.indexOf('Presto') > -1, //opera内核
            				   webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            				   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            				   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            				   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            				   android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
            				   iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            				   iPad: u.indexOf('iPad') > -1, //是否iPad
            				   webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
            			  };
             			}(),
             			language: (navigator.browserLanguage || navigator.language).toLowerCase()
            		}
            	if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
              	var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
              
             	 if (browser.versions.ios) {
                //是否在IOS浏览器打开
                	goPay(data.orderid,data.ordername,data.price);
          	    } 
             	 if(browser.versions.android){
             		window.android.toPay(data.orderid,data.ordername,data.price);
            	  }
            	} else {
            	  //否则就是PC浏览器打开
            	  $('#download').click(function(){
            	    	window.location.href="https://itunes.apple.com/us/app/%E9%9C%9E%E5%AE%A2%E7%BA%A6%E8%BD%A6/id1263380176?l=zh&ls=1&mt=8";
            	    })
            	}
              }else{
                mui.alert(data.msg);
              }
		},"json");
                   
});
	})
	function accMul(arg1, arg2) {
		var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
		try {
			m += s1.split(".")[1].length;
		} catch (e) {
		}
		try {
			m += s2.split(".")[1].length;
		} catch (e) {
		}
		return Number(s1.replace(".", "")) * Number(s2.replace(".", ""))
				/ Math.pow(10, m);
	}
</script>
	</head>
    <style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
		#l-map{height:500px;width:100%;margin-top: 150px;display: none;}
		#r-result{width:100%;}
	</style>
	<body>
		<div id="ych_fill">
			<!-- <header class="mui-bar mui-bar-nav" style="background: #16C59B;">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
				<h1 class="mui-title" style="color: #fff;">信息填写</h1>
			</header> -->
			<form class="mui-input-group" >
			<div class="mui-content">
				<p class="ych_fill_tit">${data.cpName }</p>
				<input type="hidden" name="orderuserid" value="${userid }" id="userid">
				<input type="hidden" name="activityId" value="${data.activityId }">
				<input type="hidden" name="totalPrice" value="3001" id="totalPrice">
				<input type="hidden" name="ordername" value="${data.cpName }">
					<div class="mui-input-row">
						<label>出行时间</label>
						<input type="text" id="ychtimes" readonly="readonly" placeholder="请选择上车时间" name="fromdateStr">
					</div>
					<div class="mui-input-row">
						<label>上车地点</label>
						<input type="text" id="ych_date" onkeyup="document.getElementById('sss').value =this.value;"   placeholder="请选择上车地点" value="" name="boardaddr"/>
						<i class="mui-icon mui-icon-arrowright mui-navigate-right" style="font-size: 16px;"></i>
					</div>
					<div class="mui-input-row">
						<label>包车价格</label>
						<input id="carPrice" type="text"  readonly="readonly" value="${data.carPrice }">
						<span class="titck_cost"> 元</span>
					</div>
					<div class="mui-input-row">
						<label>出行人数</label>
						<div class="mui-numbox" data-numbox-step='1' data-numbox-min='${data.minNum }'>
							<button class="mui-btn mui-btn-numbox-minus change1" type="button">-</button>
							<input id="purchasenum" class="mui-input-numbox" type="number" style="border: 1px solid #16C59B !important;" name="purchasenum"/>
							<button class="mui-btn mui-btn-numbox-plus change2" type="button">+</button>
						</div>
					</div>
					<div class="mui-input-row">
						<label>门票价格</label>
						<input id="ticket" type="text" readonly="readonly" value="${data.ticket }">
					</div>
					<div class="mui-input-row">
						<label>联系人姓名</label>
						<input type="text" id="ych_name" class="mui-input-clear" value="" placeholder="请输入联系人姓名" name="contacts">
					</div>
					<div class="mui-input-row">
						<label>联系人手机</label>
						<input type="text" id="ych_iphne" class="mui-input-clear" placeholder="请输入联系人手机" name="payertel">
					</div>
					<div class="mui-input-row">
						<label>所属院校</label>
						<input type="text" id="ych_colleges" class="mui-input-clear" placeholder="请输入所属院校" name="school">
					</div>
					<div class="mui-input-row">
						<label>学生证号</label>
						<input type="text" class="mui-input-clear" placeholder="请输入学生证号" name="stunum">
					</div>
					<div class="ych_btn">
						<button id="ychbtns" type="button">去支付<span id="price">￥3001 </span></button>
					</div>
					<p style="text-align: center;font-size: 12px;">
						*价格含包车费及门票价格</br>
						人数不足30人请咨询客服400-928-7733
					</p >
				</form>
			</div>
		<!-- <script>
			window.onload = function () {
            (function ($) {
                var oInput1 = $('suggestId');
                var oInput2 = $('ych_date');
                var oYchback = $('ychbacks');
                oYchback.onclick = function (){
                    oInput2.value = oInput1.value;
                };
            })(function $(id) {
                return document.getElementById(id);
            });
        };

		</script> -->
		<div id="ych_city">
			<div id="r-result">
				<div  class="ych_city_box">
				<div class="mui-row ych_back_ico mui-input-row">
				   <i class="mui-icon mui-icon-arrowleft ychback" id="ychbacks"></i>
                    <input type="text" id="suggestId" class="mui-input-clear" size="20" value="" style="width:100%;" placeholder="请输入上车地点"/>
				</div>
				</div>
			</div>
			<div id="searchResultPanel" style="border:none;width:100%;height:auto; display:none;z-index: 22;"></div>
		    <div id="l-map"></div>
		</div>
		<script type="text/javascript">
	// 百度地图API功能
	function G(id) {
		return document.getElementById(id);
	}

	var map = new BMap.Map("l-map");
	map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。

	var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId"
		,"location" : map
	});

	ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel").innerHTML = str;
	});

	var myValue;
	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		
		setPlace();
	});

	function setPlace(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
			map.addOverlay(new BMap.Marker(pp));    //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
	}
</script>
		<script src="${ctxStatic }/yanchengh/js/mui.min.js"></script>
		<script type="text/javascript" src="${ctxStatic }/yanchengh/js/mui.picker.min.js"></script>
		<script type="text/javascript">
			mui.init();
	      $(function(){
	      		//选择时间
				var start_time_picker = new mui.DtPicker({});
				$('#ychtimes').on('tap', function() {
					setTimeout(function() {
						start_time_picker.show(function(items) {
							$("#ychtimes").val(items.text);
						});
					}, 200);
				})
				
				//选择上车地点
				$('#ych_date').on('tap',function(){
					$('#ych_city').animate({
						right:'0px',
					})
				});
				$('.ychback').on('tap',function(){
					$('#ych_city').animate({
						right:'-100%',
					});
				});
			
			//表单验证
			var info = document.getElementById("info");
			document.getElementById("ychbtns").addEventListener('tap', function(){
				var  txti=$('#ych_iphne').val();
				var  reg=/^1\d{10}$/;
				if(	$('#ychtimes').val()==''){
			     	mui.alert('请填写出行时间');
				}else if($('#ych_date').val()==''){
					mui.alert('请填写上车地点');
				}else if($('#ych_name').val()==''){
					mui.alert('请填写联系人姓名');
				}else if($('#ych_iphne').val()==''){
					mui.alert('请填写联系人手机号');
				}else if(!reg.test(txti)){
						mui.alert('请输入正确手机号');
				}else if($('#ych_colleges').val()==''){
					mui.alert('请填写所属院校');
				};
		
		     })
		     
		     	//上车地点
			$('#ychbacks').on('tap',function(){
				var oInput1=$('#suggestId').prop('value');
	           $('#ych_date').prop('value',oInput1);
			})
	      })
	

		</script>
	</body>

</html>